<!DOCTYPE html>
<html lang="en">
 <head>    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <meta name="referrer" content="never">  
      <title>豆瓣电影777</title>
      <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <link rel="stylesheet" href="https://at.alicdn.com/t/font_745616_z5rk8pm007d.css">
      <link rel="stylesheet" href="css/movie.css" type="text/css">  
  </head>
<body>
      <main>
        <section id="top250">
          <div class="container">
           <!--
            <div class="item">
              <a href="#">
                <div class="cover">
                  <img src="http://img7.doubanio.com/view/movie_poster_cover/spst/public/p513344864.png" alt="">
                </div>
                <div class="detail">
                  <h2>霸王别姬</h2>
                  <div class="extra"><span class="score">9.3分</span> / 1000收藏</div>
                  <div class="extra">1994 / 剧情、爱情</div>
                  <div class="extra">导演: 张艺谋</div>
                  <div class="extra">主演: 张艺谋、张艺谋、张艺谋</div>
                </div>
              </a>
            </div>-->
          </div>
          <div class="loading"><span class="iconfont icon-loading"></span></div>
        </section>
          
        <section id="beimei">
          <div class="container"></div>
          <div class="loading"><span class="iconfont icon-loading"></span></div>
        </section>
          
        <section id="search">
          <div class="search-area">
             <input type="text" placeholder="搜索电影"><span class="button"> 搜索</span>
          </div>
          <div class="search-result">
             <div class="loading"><span class="iconfont icon-loading"></span> </div>
          </div>
        </section>
      </main>

      <footer>
        <div class="active">
          <span class="iconfont icon-top250"></span><span>Top250</span>
        </div>
        <div>
          <span class="iconfont icon-US"></span><span>北美</span>
        </div>
        <div>
          <span class="iconfont icon-search"></span><span>搜索</span>
        </div>
      </footer>

<script>
   //首页功能
    var top250 = {
    init: function(){
      this.$element = $('#top250')
      this.isLoading = false
      this.isFinish = false
      this.index = 0     
      this.bind()
      this.start()
    },
      
    bind: function(){
      var _this = this
      this.$element.scroll(function(){
        _this.start()
      })
    },
      
    start: function(){
      var _this = this
      this.getData(function(data){
        _this.render(data)
      })
    },
      
    getData: function(callback){
      var _this = this
      if(_this.isLoading) return;
      _this.isLoading = true
      _this.$element.find('.loading').show()
      $.ajax({
        url: 'https://api.douban.com/v2/movie/top250',
        data: {
          start: _this.index||0
        },
        dataType: 'jsonp'
      }).done(function(ret){
        _this.index += 20
        if(_this.index >= ret.total){
          _this.isFinish = true
        }
        callback&&callback(ret)
      }).fail(function(){
        console.log('数据异常')
      }).always(function(){
        _this.isLoading = false
        _this.$element.find('.loading').hide()
      })  
    },
      
    render: function(data){
      var _this = this
      data.subjects.forEach(function(movie){
        var template = `<div class="item">
      <a href="#">
          <div class="cover">
              <img src="" alt="">
          </div>
          <div class="detail">
              <h2></h2>
              <div class="extra"><span class="score"></span>分 / <span class="collect"></span>收藏</div>
              <div class="extra"><span class="year"></span> / <span class="type"></span></div>
              <div class="extra">导演: <span class="director"></span></div>
              <div class="extra">主演: <span class="actor"></span></div>
          </div>
      </a>
    </div>`
        var $node = $(template)
        $node.find('a').attr('href', movie.alt)
        $node.find('.cover img')
        .attr('src', movie.images.medium )
        $node.find('.detail h2').text(movie.title)
        $node.find('.score').text(movie.rating.average )
        $node.find('.collect').text(movie.collect_count )
        $node.find('.year').text(movie.year)
        $node.find('.type').text(movie.genres.join(' / '))
        $node.find('.director').text(function(){
          var directorsArr = []
          movie.directors.forEach(function(item){
            directorsArr.push(item.name)
          })
          return directorsArr.join('、')
        })
        $node.find('.actor').text(function(){
          var actorArr = []
          movie.casts.forEach(function(item){
            actorArr.push(item.name)
          })
          return actorArr.join('、')
        })
        _this.$element.find('.container').append($node)
      })
    },
      
    isToBottom: function(){
      return this.$element.find('.container') <= this.$element.height() + this.$element.scrollTop() + 10
    }
  }
    
    //北美电影
     var usBox = {
       init: function(){
         this.$element = $('#beimei')
         this.start()
       },
       bind: function(){
       },
       start: function(){
         var _this = this
         this.getData(function(data){
           _this.render(data)
         })
       },
       
      getData: function(callback){
        var _this = this
        if(_this.isLoading) return;
        _this.isLoading = true
        _this.$element.find('.loading').show()
        $.ajax({
          url: 'https://api.douban.com/v2/movie/us_box',
          dataType: 'jsonp'
        }).done(function(ret){
          callback&&callback(ret)
        }).fail(function(){
          console.log('数据异常')
        }).always(function(){
          _this.$element.find('.loading').hide()
        })  
      },
       
      render: function(data){
        var _this = this
        console.log(data)
        data.subjects.forEach(function(movie){
          movie = movie.subject
          var template = `<div class="item">
        <a href="#">
        <div class="cover">
        <img src="" alt="">
            </div>
        <div class="detail">
        <h2></h2>
        <div class="extra"><span class="score"></span>分 / <span class="collect"></span>收藏</div>
        <div class="extra"><span class="year"></span> / <span class="type"></span></div>
        <div class="extra">导演: <span class="director"></span></div>
        <div class="extra">主演: <span class="actor"></span></div>
      </div>
      </a>
      </div>`
          var $node = $(template)
          $node.find('a').attr('href', movie.alt)
          $node.find('.cover img')
          .attr('src', movie.images.medium )
          $node.find('.detail h2').text(movie.title)
          $node.find('.score').text(movie.rating.average )
          $node.find('.collect').text(movie.collect_count )
          $node.find('.year').text(movie.year)
          $node.find('.type').text(movie.genres.join(' / '))
          $node.find('.director').text(function(){
            var directorsArr = []
            movie.directors.forEach(function(item){
              directorsArr.push(item.name)
            })
            return directorsArr.join('、')
          })
          $node.find('.actor').text(function(){
            var actorArr = []
            movie.casts.forEach(function(item){
              actorArr.push(item.name)
            })
            return actorArr.join('、')
          })
          _this.$element.find('.container').append($node)
        })
      }
    }
 
     
     //搜索功能 
     var search = {
     init: function(){
      console.log('usBox ok')
      this.$element = $('#search')
      this.keyword = ''
      this.bind()
      this.start()
    },
    bind: function(){
      var _this = this
      this.$element.find('.button').click(function(){
        _this.keyword = _this.$element.find('input').val()
        _this.start()
      })
    },
    start: function(){
      var _this = this
      this.getData(function(data){
        _this.render(data)
      })
    },
    getData: function(callback){
      var _this = this
      _this.$element.find('.loading').show()
      $.ajax({
        url: 'https://api.douban.com/v2/movie/search',
        data: {
          q: _this.keyword
        },
        dataType: 'jsonp'
      }).done(function(ret){
        callback&&callback(ret)
      }).fail(function(){
        console.log('数据异常')
      }).always(function(){
        _this.$element.find('.loading').hide()
      })  
    },
    render: function(data){
      var _this = this
      console.log(data)
      data.subjects.forEach(function(movie){
        var template = `<div class="item">
      <a href="#">
      <div class="cover">
      <img src="" alt="">
          </div>
      <div class="detail">
      <h2></h2>
      <div class="extra"><span class="score"></span>分 / <span class="collect"></span>收藏</div>
      <div class="extra"><span class="year"></span> / <span class="type"></span></div>
      <div class="extra">导演: <span class="director"></span></div>
      <div class="extra">主演: <span class="actor"></span></div>
    </div>
    </a>
    </div>`
        var $node = $(template)
        $node.find('a').attr('href', movie.alt)
        $node.find('.cover img')
        .attr('src', movie.images.medium )
        $node.find('.detail h2').text(movie.title)
        $node.find('.score').text(movie.rating.average )
        $node.find('.collect').text(movie.collect_count )
        $node.find('.year').text(movie.year)
        $node.find('.type').text(movie.genres.join(' / '))
        $node.find('.director').text(function(){
          var directorsArr = []
          movie.directors.forEach(function(item){
            directorsArr.push(item.name)
          })
          return directorsArr.join('、')
        })
        $node.find('.actor').text(function(){
          var actorArr = []
          movie.casts.forEach(function(item){
            actorArr.push(item.name)
          })
          return actorArr.join('、')
        })
        _this.$element.find('.search-result').append($node)
      })
    }
  }   
    
    //app整体管理功能
     var app ={
       init: function(){
         this.$tabs = $('footer > div')
         this.$panels = $('section')
         this.bind()
         
         top250.init()
         usBox.init()
         search.init()
       },
       
       bind: function(){
         var _this = this
         this.$tabs.on('click',function(){ 
           $(this).addClass('active').siblings().removeClass('active')
           _this.$panels.eq($(this).index()).fadeIn().siblings().hide()
         })
       }     
     }
   
    app.init()
</script>

</body>
</html>  